<template>
    <div>
        <div style="margin-bottom: 10px;display: flex;margin-left: 10px;">

            <span style="margin-top:4px ;color: #808080;font-size: 16px;align:center">图书名称:</span>
            <el-input v-model="queryCondition.bookName" placeholder="请输入图书名称" style="width:240px;margin-left:5px ;"></el-input>



            <el-button type="primary" style="width: 80px;margin-left: 9px;" @click="toQuery">查询</el-button>


            <el-button style="width: 80px;" @click="addBookInfo" v-if="userInfo.role!='ROLE_STUDENT'">新增</el-button>
        </div>
        <!--表格部分-->
        <div>
            <el-table :data="tableData" style="width: 100%" ref="table">
                <el-table-column prop="bookName" label="图书名称">
                </el-table-column>
                <el-table-column prop="author" label="作者">
                </el-table-column>
                <el-table-column prop="press" label="出版社">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                </el-table-column>
                <el-table-column prop="typeName" label="图书类别">
                </el-table-column>
                <el-table-column prop="img" label="图书封面">
                   <template slot-scope="scope">
                    <el-image 
                        style="width: 100px; height: 100px"
                        :src="'http://localhost:8089/api/file/'+scope.row.img" 
                        :preview-src-list="['http://localhost:8089/api/file/'+scope.row.img]">
                    </el-image>
                   </template>
                </el-table-column>
                <el-table-column label="操作"  v-if="userInfo.role!='ROLE_STUDENT'">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editBookInfo(scope.row)" >编辑</el-button>
                        <el-button type="danger" @click="deleteUserInfo(scope.row.id)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <!--分页部分-->
        <div style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!--新增、编辑弹出框-->
        <el-dialog title="新增图书信息" :visible.sync="addBookDialog" v-if="addBookDialog" width="30%" @close="addUserClose">
            <template slot="footer">
                <span class="dialog-footer">
                    <el-button type="primary" @click="saveBookInfo">保存</el-button>
                    <el-button @click="reset">重置</el-button>
                </span>
            </template>
            <el-form ref="addBookInfoForm" :model="addBookInfos" :rules="rules" label-width="90px" size="mini">
                
                <el-form-item label="图书名称:" prop="bookName" required>
                    <el-input v-model="addBookInfos.bookName"></el-input>
                </el-form-item>
                <el-form-item label="图书作者:" prop="author" required>
                    <el-input v-model="addBookInfos.author"></el-input>
                </el-form-item>
                <el-form-item label="图书封面" prop="img">
                    <el-upload action="http://localhost:8089/api/file/upload" :on-success="successUpload">
                        <el-button>点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="出版社:" prop="press" required>
                    <el-input v-model="addBookInfos.press"></el-input>
                </el-form-item>
                <el-form-item label="价格:" prop="price" required>
                    <el-input v-model="addBookInfos.price"></el-input>
                </el-form-item>
                <el-form-item label="图书类型" prop="typeId">
                    <el-select v-model="addBookInfos.typeId" placeholder="请选择">
                        <el-option
                        v-for="item in bookTypes"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                    
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { saveBook,queryByPage } from '@/api/bookApi.js'
import { queryAllBookType }from '@/api/typeApi.js'
export default {
    name: 'BookView',
    props: {

    },
    components: {

    },
    data() {
        return {
            rules: {
                bookName: [
                    { required: true, message: '图书名称不能为空', trigger: 'blur' }
                ],
                author: [
                    { required: true, message: '作者不能为空', trigger: 'blur' }
                ],
                press:[
                    {required:true,message:'出版社不能为空',trigger:'blur'}
                ],
                price:[
                    {required:true,message:'图书价格不能为空',trigger:'blur'}
                ]
            },
            addBookInfos: {
                bookName: '',
                author: '',
                press: '',
                price: '',
                img:'',
                typeId:'',
            },
            //新增图书信息弹出框标志
            addBookDialog: false,
            //每页大小
            pageSize: 5,
            //当前页码
            currentPage: 1,
            //总记录数
            total: 0,
            //查询条件
            queryCondition: {
                bookName: ''
            },
            //表格数据
            tableData: [],
            mulitpList:[],
            //选中选项的id
            selectItemId:[],
            //所有的图书类型
            bookTypes:[],
            userInfo:JSON.parse( localStorage.getItem("user"))
        }
    },
    methods: {
        //编辑
        editBookInfo(row){
            this.addBookDialog=true
            this.addBookInfos=row
            
            // saveBook(this.addBookInfos).then((res)=>{
            //     if(res.code==='0'){
            //         this.$message.success("编辑成功")
            //     }
            // }).catch((error)=>{
            //     this.$message.error("编辑失败!",error)
            // })
        },
        //文件上传之后的回调
        successUpload(response){
            console.log("上传的之后的回调::::",response);
            this.addBookInfos.img=response.data
        },
        addBookInfo(){
            this.addBookInfos={}
            this.addBookDialog=true
        },
        //保存图书
        saveBookInfo(){
            this.$refs.addBookInfoForm.validate((valid)=>{
                if(valid){
                    saveBook(this.addBookInfos).then((response)=>{
                        if(response.code==='0'){
                            this.$message.success("保存成功")
                            this.addBookDialog=false
                        }
                    })
                }
            })
        },
        //查询
        toQuery(){
            queryByPage(this.queryCondition,this.currentPage,this.pageSize).then((response)=>{
                if(response.code==='0'){
                    this.tableData=response.data.list
                    this.total=response.data.total
                }
            }).catch((error)=>{
                this.$message.error("分页查询失败!",error)
            })
        },
        //查询所有图书类型
        queryAllBookTypeInfo(){
            queryAllBookType({}).then((response)=>{
                if(response.code==='0'){
                    
                    this.bookTypes=response.data
                }
            }).catch((error)=>{
                this.$message.error("查询所有图书类型失败!",error)
            })
        }
    },
    created() {
        this.toQuery()
        this.queryAllBookTypeInfo()
    },
    watch: {

    }
}
</script>
<style scoped>
/* 可以添加一些CSS来调整布局 */
.dialog-footer {
    text-align: right;
}
</style>